//
//  CustomTopTabBar.swift
//  MyCloset
//
//  Created by 牟好好 on 2024/11/22.
//

import SwiftUI

struct CustomTopTypeTabBar: View {
    @Binding var selectedIndex: Int
    var items: [String]
    
    var body: some View {
        HStack {
            ForEach(items, id: \.self) { item in
                Button(action: {
                    selectedIndex = clothTypes.firstIndex(of: item) ?? 0
                }, label: {
                    Text(item)
                        .font(selectedIndex == clothTypes.firstIndex(of: item)
                              ? .system(size: 20, weight: .bold) : .system(size: 19))
                        .foregroundStyle(selectedIndex == clothTypes.firstIndex(of: item)
                                         ? .blue : .accent)
                        .padding(.bottom, 8)
                        .padding(.horizontal, 3)
                        .overlay(alignment: .bottom) {
                            selectedIndex == clothTypes.firstIndex(of: item)
                            ?
                            Rectangle()
                                .frame(width: 18, height: 3).foregroundStyle(.blue) : nil
                        }
                })
            }
        }
        .animation(.spring(duration: 0.3), value: selectedIndex)
        .frame(maxWidth: boundsWidth * 0.9)
    }
}

struct CustomTopChooseBar: View {
    @Binding var isSelectedColors: Bool
    var action: () -> Void
    
    var body: some View {
        HStack(spacing: 10) {
            Button {
                isSelectedColors = false
                action()
            } label: {
                Text("样式")
                    .padding(.vertical, 8)
                    .foregroundStyle(isSelectedColors ? .accent : .blue)
                    .overlay(alignment: .bottom) {
                        isSelectedColors ?
                        nil : Rectangle()
                            .frame(width: 18, height: 3).foregroundStyle(.blue)
                    }
            }
            
            Button {
                isSelectedColors = true
                action()
            } label: {
                Text("颜色")
                    .padding(.vertical, 8)
                    .foregroundStyle(isSelectedColors ? .blue : .accent)
                    .overlay(alignment: .bottom) {
                        isSelectedColors ?
                        Rectangle()
                            .frame(width: 18, height: 3).foregroundStyle(.blue) : nil
                    }
            }
        }
        .font(.system(size: 22, weight: .bold))
    }
}

#Preview {
    CustomTopTypeTabBar(selectedIndex: .constant(0), items: ["上装", "下装", "外套", "帽子", "鞋子"])
}

#Preview {
    CustomTopChooseBar(isSelectedColors: .constant(false)) {}
}
